<script setup>
import { ref, onMounted } from 'vue'
import { getFunc } from '@/api/AccApi'
import { navInfoConf, navView } from '@/config/navConf'
import { filterNavByPermission } from '@/utils/filterNav'
import { perm‌‌nav } from '@/config/perm‌‌Nav'

const windowHeight = ref(window.innerHeight)
const filteredMenuItems = ref([])
const menuActive = ref(null)

const editableTabsValue = ref(null)
const editableTabs = ref([
  // {
  //   title: 'Tab 1',
  //   name: '1',
  //   component: 'Tab 1 content',
  // },
])

// const handleTabsClick = (TabsPaneContext, Event) => {
//   console.log(TabsPaneContext.props)
//   console.log(Event)
// }

const handleTabsChange = (tabName) => {
  console.log(tabName)
  editableTabsValue.value = tabName
  menuActive.value = tabName
}
const handleTabsRemove = (targetName) => {
  for (let i = 0, len = editableTabs.value.length; i < len; i++) {
    if (targetName === editableTabs.value[i].name) {
      editableTabs.value.splice(i, 1)
      if (i != 0) {
        editableTabsValue.value = editableTabs.value[i - 1].name
        menuActive.value = editableTabs.value[i - 1].name
      }
      return
    }
  }
}

const selecLefttMenu = (item) => {
  console.log(item)
  console.log(item.key)
  if (item.key) {
    let component = navView[item.key]
    if (component) {
      // 检查 组件是否存在
      for (let i = 0; i < editableTabs.value.length; i++) {
        if (editableTabs.value[i].name == item.key) {
          editableTabsValue.value = item.key
          return
        }
      }
      editableTabs.value.push({
        title: item.title,
        name: item.key,
        component: component,
      })
      editableTabsValue.value = item.key
      menuActive.value = item.key
    } else {
      console.log('组件不存在')
    }
  }
}

const getPermission = async () => {
  const authorize = ['product_info','role_perm']
  let navinfo = filterNavByPermission(navInfoConf, authorize, perm‌‌nav)
  console.log('navinfo:', navinfo)
  filteredMenuItems.value = navinfo
  // 以下是网络请求获取权限信息
  // let res = await getFunc()
  // console.log(res)
  // if (res.status == 200) {
  //   if (res.data.code == 0) {
  //     console.log('res.data.data:', res.data.data)
  //     if (res.data.data.length == 0) return
  //     let navinfo = filterNavByPermission(navInfoConf, res.data.data, perm‌‌nav)
  //     console.log('navinfo:', navinfo)
  //     filteredMenuItems.value = navinfo
  //   }
  // }
}

onMounted(() => {
  getPermission()
})
</script>

<template>
  <el-container>
    <el-aside width="200px">
      <div
        style="
          width: 179px;
          height: 41px;
          line-height: 41px;
          padding-left: 20px;
          border-right: 1px solid #dcdfe6;
        "
      >
        <span> wadm后台 </span>
      </div>

      <el-menu :default-active="menuActive" :style="{ height: `${windowHeight - 41}px` }">
        <template v-for="(item, index) in filteredMenuItems" :key="index">
          <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.key">
            <template #title>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item
              v-for="(childrenItem, childrenIndex) in item.children"
              :key="childrenIndex"
              :index="childrenItem.key"
              @click="selecLefttMenu(childrenItem)"
            >
              <span>{{ childrenItem.title }}</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item v-else :index="item.key" @click="selecLefttMenu(item)">
            <span>{{ item.title }}</span>
          </el-menu-item>
        </template>
        <el-sub-menu index="userinfo">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>wadm@xx.xyz</span>
          </template>
          <el-menu-item index="uinfo">
            <el-icon><icon-menu /></el-icon>
            <span>账号信息</span>
          </el-menu-item>
          <el-menu-item index="quit">
            <el-icon><icon-menu /></el-icon>
            <span>退出</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-main style="padding: 0px">
        <!-- @tab-click="handleTabsClick" -->
        <div>
          <el-tabs
            v-model="editableTabsValue"
            closable
            type="card"
            @tab-change="handleTabsChange"
            @tab-remove="handleTabsRemove"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              <div
                style="overflow-y: auto; width: 100%"
                :style="{ height: `${windowHeight - 60}px` }"
              >
                <keep-alive :max="30">
                  <component :is="item.component"></component>
                </keep-alive>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
